<template>
  <div :class="[ns.b()]">
    <div :class="ns.e('search-wrap')">
      <div><Search v-bind="$attrs" /></div>
      <div>
        <slot v-if="$slots.buttons" name="buttons" />
        <template v-else>
          <el-space v-if="buttons.length" :size="buttonsSpace">
            <Button v-for="item in buttons" :key="item.key" :type="item.type" :size="item.size" @click="item.change" :before-change="item.beforeChange">
              {{ getLangValue({ key: item.key, type: 'button' }) }}
            </Button>
          </el-space>
        </template>
      </div>
    </div>
    <div :class="ns.e('table-wrap')">
      <vxe-table
        ref="tableRef"
        :data="data"
        :virtual-y-config="{ enabled, gt: 0 }"
        show-overflow
        :column-config="columnConfig"
        :sort-config="sortConfig"
        :cell-config="{ height: 40 }"
        :stripe="stripe"
        :loading="isLoading"
        :height="height"
        @checkbox-all="selectAllChangeEvent"
        @checkbox-change="selectChangeEvent"
        @radio-change="radioChangeEvent"
        @sort-change="sortChangeEvent"
      >
        <template v-for="item in props.columns" :key="item.field">
          <!-- 序号 -->
          <vxe-column v-if="item.type === 'seq'" type="seq" width="70"></vxe-column>
          <!-- 复选框 -->
          <vxe-column v-else-if="item.type === 'checkbox'" type="checkbox" width="60"></vxe-column>
          <!-- 单选框 -->
          <vxe-column v-else-if="item.type === 'radio'" type="radio" width="60">
            <template #header>adf</template>
          </vxe-column>
          <!-- 插槽 -->
          <vxe-column v-else-if="item.type === 'slot'" :sortable="item.sortable" :field="item.field" :title="getLangValue({ key: item.field })" :width="item.width">
            <template #default="{ row }">
              <slot :name="item.slotName" :row-data="row" />
            </template>
          </vxe-column>
          <!-- 文本渲染 -->
          <vxe-column v-else :sortable="item.sortable" :field="item.field" :title="getLangValue({ key: item.field })" :width="item.width"></vxe-column>
        </template>
        <!--  空数据提示 -->
        <template #empty>
          <div><p>没有更多数据了！</p></div>
        </template>
      </vxe-table>
    </div>
    <div :class="ns.e('footer-wrap')">
      <div class="pagination">
        <div>共{{ total }}条</div>
        <div><Pagination ref="paginationRef" @page="changePage" /></div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
  export default { name: 'TableComponet' }
</script>
<script setup lang="ts">
  export interface TableComponentExposed {
    setLoading: (value: boolean) => void
    getCheckedRow: () => any
    totalCount: (val: number) => void
    resetPage: (params?: { pageIndex?: number; pageSize?: number }) => void
  }
  // ui层和业务层，暴露一些方法
  import { useUamespace } from '@/hooks/use-namesapce'
  // hooks
  import { useTable } from './hooks/use-table'
  import type { PropsInterface, EmitsInterface } from './types/props'
  // vxe-table
  import { VxeTablePropTypes, VxeUI, VxeTableInstance, VxeTableEvents } from 'vxe-table'

  // props
  const props = withDefaults(defineProps<PropsInterface>(), {
    columns: () => [],
    data: () => [],
    buttons: () => [],
    enabled: () => true,
    resizable: () => true,
    height: () => '100%',
    buttonsSpace: () => 12,
  })
  // emit
  const emit = defineEmits<EmitsInterface>()
  // table ref
  const tableRef = ref<VxeTableInstance<DataInterface>>()
  const paginationRef = ref(null)
  // 解构hook
  const { getLangValue } = useTable(props.name)
  // 列表配置项
  const columnConfig = reactive<VxeTablePropTypes.ColumnConfig<DataInterface>>({
    resizable: props.resizable,
  })
  // 排序配置项
  const sortConfig = ref<VxeTablePropTypes.SortConfig<DataInterface>>({
    remote: props.remote,
  })
  const ns = useUamespace('table')
  /**
   * 统计数量
   */
  const total = ref(0)

  /**
   * 加载动画
   */
  const isLoading = ref(false)
  const setLoading = (value: boolean): void => {
    isLoading.value = value
  }
  /**
   * 获取选中的数据
   */
  const getCheckedRow = () => {
    const $table = tableRef.value
    if ($table) {
      return $table.getCheckboxRecords()
    }
    return null
  }

  /**
   * 复选框
   */
  const selectAllChangeEvent: VxeTableEvents.CheckboxAll<DataInterface> = ({ checked }) => {
    emit('selectAllChange', getCheckedRow())
  }
  const selectChangeEvent: VxeTableEvents.CheckboxChange<DataInterface> = ({ checked }) => {
    emit('selectChange', getCheckedRow())
  }
  const radioChangeEvent: VxeTableEvents.RadioChange<DataInterface> = ({ row }) => {
    emit('radioChange', row)
  }
  // 排序事件
  const sortChangeEvent: VxeTableEvents.SortChange<DataInterface> = ({ field, order }) => {
    if (!props.remote) {
      return
    }
    emit('sortChange', field, order)
  }

  /**
   * total
   */
  const totalCount = (val: number): void => {
    total.value = val
  }

  const changePage = (page: number, size: number) => {
    emit('update:page', page)
    emit('update:size', size)
    emit('page')
  }
  /**
   * 重置页码
   */
  const resetPage = (params?: { pageIndex?: number; pageSize?: number }) => {
    paginationRef.value?.resetPage(params)
  }

  defineExpose<TableComponentExposed>({
    setLoading,
    getCheckedRow,
    totalCount,
    resetPage,
  })
</script>

<style lang="scss" scoped>
  @include b(table) {
    height: 100%;
    display: flex;
    flex-direction: column;
    @include e(table-wrap) {
      flex: 1;
      height: 0;
    }
    @include e(search-wrap) {
      padding-bottom: 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    @include e(footer-wrap) {
      padding-top: 12px;
    }
  }
  .pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
</style>
